<template>
 <div class="container">
   <div class="card-search">
    <el-form size="small" :inline="true" label-width="80px" :model="form" class="demo-form-inline">
      <el-form-item label="规格型号">
        <el-select filterable  clearable v-model="form.specification" placeholder="请选择">
            <el-option v-for="(item, index) in specifications" :key="index" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="直径规格">
        <el-select filterable  clearable v-model="form.diameter" placeholder="请选择">
            <el-option v-for="(item, index) in diameters" :key="index" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item style="float:right;" label=" ">
        <el-button  icon="el-icon-search" type="primary" @click="getAllData()">查询</el-button>
        <el-button  icon="el-icon-refresh" type="primary" plain @click="refresh()">重置</el-button>
      </el-form-item>
    </el-form>
   </div>
   <div class="card-table">
        <el-table :header-cell-style="getRowClass" :data="tableData" style="width: 100%">
          <el-table-column fixed label="工单生成时间" align="center" width="155">
            <template slot-scope="{row}">
              <span>{{row.createTime.slice(0,-3)}}</span>
            </template>
          </el-table-column>
          <el-table-column label="规格型号" align="center" width="100">
            <template slot-scope="{row}">
              <span>{{row.specification}}</span>
            </template>
          </el-table-column>
          <el-table-column label="直径规格" align="center" width="100">
            <template slot-scope="{row}">
              <span>{{row.diameter}}</span>
            </template>
          </el-table-column>
          <el-table-column label="坩埚数量" align="center" width="100">
            <template slot-scope="{row}">
              <span>{{row.crucibleNumber}}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" align="center">
            <template slot-scope="{}">
              <el-tag size="medium" type="success">已 质 检</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="待装炉数" align="center" width="120">
            <template slot-scope="{row}">
              <span>{{row.prepareStoveNum == 0? '-':row.prepareStoveNum}}</span>
            </template>
          </el-table-column>
          <el-table-column label="质检人" align="center" width="120">
            <template slot-scope="{row}">
              <span>{{row.qualityTestingPeople == 0? '-':row.qualityTestingPeople}}</span>
            </template>
          </el-table-column>
          <el-table-column label="重量-kg" align="center" width="120">
            <template slot-scope="{row}">
              <span>{{row.crucible.weight == 0? '-':row.crucible.weight}}</span>
            </template>
          </el-table-column>
          <el-table-column label="密度-g/mm³" align="center" width="120">
            <template slot-scope="{row}">
              <span>{{row.crucible.density == 0? '-':row.crucible.density.toFixed(2) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="内直径 - 外直径 mm" align="center" width="150">
            <template slot-scope="{row}">
              <span>{{row.crucible.innerDiameter == 0? ' - ':row.crucible.innerDiameter}}</span>
              <span> - </span>
              <span>{{row.crucible.outerDiameter == 0? ' - ':row.crucible.outerDiameter}}</span>
            </template>
          </el-table-column>
          <el-table-column label="内长度 - 外长度 mm" align="center" width="150">
            <template slot-scope="{row}">
              <span>{{row.crucible.innerLength == 0? ' - ':row.crucible.innerLength}}</span>
              <span> - </span>
              <span>{{row.crucible.outerLength == 0? ' - ':row.crucible.outerLength}}</span>
            </template>
          </el-table-column>
          <el-table-column label="质检说明" align="center" min-width="120">
            <template slot-scope="{row}">
              <span>{{row.qualityTestingDesc}}</span>
            </template>
          </el-table-column>
        </el-table>
      <div class="pagin" v-if="total>0">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
   </div>
 </div>
</template>

<script>
import { crucibleFormingGet, getCrucibleFormConditions } from '@/api/crucible.js'
import { nomalPages } from '@/mixin'
export default {
  name: 'test',
  mixins: [nomalPages],
  components: {},
  data () {
    return {
      form: { // 搜索表单
        specification: '',
        diameter: ''
      },
      title: '',
      selectRow: '',
      dialogFormVisible: false,
      specifications: '',
      diameters: '',
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 1
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {
    getCrucibleFormConditions().then(res => {
      this.diameters = res.data.data.diameter
      this.specifications = res.data.data.specification
    })
  },
  methods: {
    getAllData () {
      const params = {
        ...this.form,
        pageSize: this.pageSize,
        currPage: this.currentPage,
        isQualityTesting: true
      }
      crucibleFormingGet(params).then(res => {
        console.log(res)
        if (res.data.code === 200) {
          this.tableData = res.data.data.pageData
          this.total = res.data.data.total
        } else {
          this.$message({
            message: res.data.message,
            type: 'warning'
          })
        }
      })
    }
  }
}
</script>

<style  scoped>
.pagin{
  display: flex;
  justify-content: right;
  padding: 12px 12px 0 0;
}
.pagin  .el-pager .active{
  background-color: $primary !important;
}
</style>
